<script lang="ts">
import { trackSilentException } from '../bugs'
import { DEFAULT_ROOM, ROOM_PATH } from '../config'
import { historyAllRooms } from '../lib/history'
import { openExternalLink } from '../lib/link-external'
import { generateName } from '../lib/names'
import { state } from '../state'
import AppHelp from './app-help.vue'
import { gotoUrl } from './external-links'

import './app-welcome.scss'

export default {
  name: 'AppWelcome',
  components: {
    AppHelp,
  },
  data() {
    const defaultName = DEFAULT_ROOM ?? generateName()
    return {
      defaultName,
      room: defaultName,
      url: '',
      initialWidth: -1,
      currentChar: 0,
      observer: null,
      history: historyAllRooms().slice(0, 5),
      roomPath: ROOM_PATH,
      openExternalLink,
    }
  },
  watch: {
    room() {
      this.updateInput()
    },
  },
  async mounted() {
    await this.$nextTick()

    const input = this.$refs.input
    if (input) {
      input.style.width = `${input.scrollWidth}px`
      this.updateInput()

      this.observer = new ResizeObserver(this.updateInput)
      this.observer.observe(document.body)

      this.charAnimation()

      if (
        !/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)
      )
        input.focus()
    }
  },

  beforeUnmount() {
    this.observer?.disconnect()
  },
  methods: {
    gotoUrl,
    doEnterRoom(room) {
      if (room) {
        state.room = room
        try {
          window.history.pushState(
            null, // { room },
            null, // room,
            ROOM_PATH + room,
          )
        }
        catch (err) {
          trackSilentException(err)
        }
      }
    },
    doEnterInputRoom() {
      this.doEnterRoom(this.room || this.defaultName || '')
    },
    updateInput() {
      const input = this.$refs.input
      if (input) {
        if (this.initialWidth < 0)
          this.initialWidth = input.scrollWidth
        const value = input.value.trim()
        input.style.width = '1px'
        input.style.width = `${value ? input.scrollWidth : this.initialWidth}px`
        this.url = ROOM_PATH + (value || this.defaultName)
      }
    },
    charAnimation() {
      setTimeout(() => {
        const input = this.$refs.input
        if (input) {
          this.currentChar++
          this.$refs.input.value = this.defaultName.substr(0, this.currentChar)
          this.updateInput()
          if (this.currentChar < this.defaultName.length)
            this.charAnimation()
        }
      }, 100)
    },
  },
}
</script>

<template>
  <div class="-scroll">
    <div class="page1">
      <div class="main">
        <div class="main-body">
          <div class="logo">
            <form id="form" @submit.prevent="doEnterInputRoom">
              <a id="link" :href="url" class="link" @click.prevent="doEnterInputRoom">Brie<span class="dot">.</span>fi<span class="slash">/</span>ng<span class="slash">/</span></a>
              <wbr>
              <input
                id="room"
                ref="input"
                v-model="room"
                type="text"
                name="room"
                enterkeyhint="go"
                spellcheck="false"
                :placeholder="defaultName"
              >
            </form>
            <div class="button-container">
              <a
                id="button"
                :href="url"
                class="button start-button"
                @click.prevent="doEnterInputRoom"
              >{{ $t("welcome.start") }}</a>
            </div>
          </div>
          <div v-if="history.length > 0" class="history">
            <div class="history-intro">
              {{ $t('welcome.history') }}
            </div>
            <div class="history-list">
              <a v-for="name in history" :key="name" :href="roomPath + name" @click.prevent="doEnterRoom(name)">{{ name }}</a>
            </div>
          </div>
        </div>
      </div>
      <div class="footer links">
        <p>
          <a title="GitHub" :href="gotoUrl('api')" class="brand-icon" target="_blank" rel="noopener" @click="openExternalLink">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>
            Github
          </a>
          |
          <a title="Apple iOS App Store" href="https://apps.apple.com/app/briefing-video-chat/id1510803601" class="brand-icon" target="_blank" rel="noopener" @click="openExternalLink">
            <svg id="apple" viewBox="0 0 24 24"><path d="M7.078 23.55c-.473-.316-.893-.703-1.244-1.15-.383-.463-.738-.95-1.064-1.454-.766-1.12-1.365-2.345-1.78-3.636-.5-1.502-.743-2.94-.743-4.347 0-1.57.34-2.94 1.002-4.09.49-.9 1.22-1.653 2.1-2.182.85-.53 1.84-.82 2.84-.84.35 0 .73.05 1.13.15.29.08.64.21 1.07.37.55.21.85.34.95.37.32.12.59.17.8.17.16 0 .39-.05.645-.13.145-.05.42-.14.81-.31.386-.14.692-.26.935-.35.37-.11.728-.21 1.05-.26.39-.06.777-.08 1.148-.05.71.05 1.36.2 1.94.42 1.02.41 1.843 1.05 2.457 1.96-.26.16-.5.346-.725.55-.487.43-.9.94-1.23 1.505-.43.77-.65 1.64-.644 2.52.015 1.083.29 2.035.84 2.86.387.6.904 1.114 1.534 1.536.31.21.582.355.84.45-.12.375-.252.74-.405 1.1-.347.807-.76 1.58-1.25 2.31-.432.63-.772 1.1-1.03 1.41-.402.48-.79.84-1.18 1.097-.43.285-.935.436-1.452.436-.35.015-.7-.03-1.034-.127-.29-.095-.576-.202-.856-.323-.293-.134-.596-.248-.905-.34-.38-.1-.77-.148-1.164-.147-.4 0-.79.05-1.16.145-.31.088-.61.196-.907.325-.42.175-.695.29-.855.34-.324.096-.656.154-.99.175-.52 0-1.004-.15-1.486-.45zm6.854-18.46c-.68.34-1.326.484-1.973.436-.1-.646 0-1.31.27-2.037.24-.62.56-1.18 1-1.68.46-.52 1.01-.95 1.63-1.26.66-.34 1.29-.52 1.89-.55.08.68 0 1.35-.25 2.07-.228.64-.568 1.23-1 1.76-.435.52-.975.95-1.586 1.26z" /></svg>
            iOS App
          </a>
          |
          <a title="Install Progressive Web App" :href="gotoUrl('pwa')" class="brand-icon" target="_blank" rel="noopener" @click="openExternalLink">
            <svg role="img" viewBox="0 0 1952.00 734.93"><g>
              <path fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 1436.62,603.304L 1493.01,460.705L 1655.83,460.705L 1578.56,244.39L 1675.2,0.000528336L 1952,734.933L 1747.87,734.933L 1700.57,603.304L 1436.62,603.304 Z " />
              <path fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 1262.47,734.935L 1558.79,0.00156593L 1362.34,0.0025425L 1159.64,474.933L 1015.5,0.00351906L 864.499,0.00351906L 709.731,474.933L 600.585,258.517L 501.812,562.819L 602.096,734.935L 795.427,734.935L 935.284,309.025L 1068.63,734.935L 1262.47,734.935 Z " />
              <path fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 186.476,482.643L 307.479,482.643C 344.133,482.643 376.772,478.552 405.396,470.37L 436.689,373.962L 524.148,104.516C 517.484,93.9535 509.876,83.9667 501.324,74.5569C 456.419,24.852 390.719,0.000406265 304.222,0.000406265L -3.8147e-006,0.000406265L -3.8147e-006,734.933L 186.476,734.933L 186.476,482.643 Z M 346.642,169.079C 364.182,186.732 372.951,210.355 372.951,239.95C 372.951,269.772 365.238,293.424 349.813,310.906C 332.903,330.331 301.766,340.043 256.404,340.043L 186.476,340.043L 186.476,142.598L 256.918,142.598C 299.195,142.598 329.103,151.425 346.642,169.079 Z " />
            </g></svg>
            Web App
          </a>
        </p>
        <p>
          {{ $t('welcome.abstract') }}
        </p>
        <p>
          {{ $t('welcome.created') }}
          <a :href="gotoUrl('holtwick')" target="_blank" rel="noopener" @click="openExternalLink">holtwick.de</a>
          <a title="Follow @holtwick on mastodon.social" :href="gotoUrl('mastodon')" class="brand-icon" target="_blank" rel="noopener me" @click="openExternalLink">
            <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" /><path fill="black" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" /></svg>
          </a>
          <a title="Follow @holtwick on Twitter" :href="gotoUrl('twitter')" class="brand-icon" target="_blank" rel="noopener me" @click="openExternalLink">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" /></svg>
          </a>
          <a title="Connect to Dirk Holtwick at LinkedIn" :href="gotoUrl('linkedin')" class="brand-icon" target="_blank" rel="noopener" @click="openExternalLink">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>
          </a>
          <a title="Upvote on Product Hunt" :href="gotoUrl('producthunt')" class="brand-icon" target="_blank" rel="noopener" @click="openExternalLink">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.604 8.4h-3.405V12h3.405c.995 0 1.801-.806 1.801-1.801 0-.993-.805-1.799-1.801-1.799zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm1.604 14.4h-3.405V18H7.801V6h5.804c2.319 0 4.2 1.88 4.2 4.199 0 2.321-1.881 4.201-4.201 4.201z" /></svg>
          </a>
          <a title="Upvote on AlternativeTo" :href="gotoUrl('alternative-to')" class="brand-icon" target="_blank" rel="noopener" @click="openExternalLink">
            <svg viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg">
              <path d="M91.72,47.7 C90.7717574,47.6438228 89.8678651,48.1072591 89.36,48.91 C88.42,48.32 85.87,47.08 84.88,46.57 L84.52,46.39 C84.4624915,46.3655468 84.3975085,46.3655468 84.34,46.39 L84.34,46.33 C84.3452109,46.2567592 84.3452109,46.1832408 84.34,46.11 C85.34,25.53 64.51,9.54 44.34,15.73 C34.5462513,18.8452468 26.8757276,26.5232285 23.77,36.32 C22.9477894,39.3156206 22.5109327,42.4038613 22.47,45.51 L21.71,45.81 L21.16,46.04 C20.16,46.48 19.16,46.95 18.16,47.46 C17.16,47.97 16.16,48.46 15.25,49.09 C15.1180202,49.1716379 15.0667429,49.3382892 15.13,49.48 C15.2060444,49.6299391 15.3851492,49.6954652 15.54,49.63 C16.54,49.17 17.54,48.76 18.54,48.38 C19.54,48 20.59,47.66 21.63,47.38 L21.69,47.38 C22.19,47.23 22.69,47.1 23.2,46.97 L23.98,46.79 L24.07,46.79 L24.77,46.64 C25.82,46.41 26.88,46.27 27.94,46.14 L28.06,46.14 C28.4690892,46.0802397 28.8091565,45.7941798 28.938086,45.4013663 C29.0670155,45.0085528 28.9626118,44.5766084 28.668506,44.2860451 C28.3744001,43.9954818 27.9412224,43.89632 27.55,44.03 C26.55,44.27 25.55,44.53 24.64,44.84 L24.83,44.78 C24.8876539,42.0113928 25.2873518,39.2605312 26.02,36.59 C28.8974616,27.5502723 35.9802723,20.4674616 45.02,17.59 C45.8333333,17.3433333 46.6433333,17.1333333 47.45,16.96 C48.24,16.79 51.4,16.34 47.95,18.27 C42.2161258,21.5667516 37.9323874,26.900006 35.95,33.21 C34.95,36.44 34.56,42.81 35.26,47.7 C35.48,49.23 34.96,49.53 34.01,49.93 C32.01,50.78 28.51,52.32 26.71,54.5 C26.01,55.34 25.71,54.5 25.54,53.9 C25.1899221,52.2537025 24.9758669,50.5813965 24.9,48.9 C24.8925325,48.7533484 24.819689,48.6177759 24.701522,48.5306035 C24.583355,48.4434311 24.432322,48.4138488 24.29,48.45 C23.8,48.57 23.29,48.69 22.83,48.85 C22.6265159,48.9201561 22.4926381,49.1148873 22.5,49.33 C22.78,55.76 24.41,61.74 28.31,61.55 C28.4604298,61.5389979 28.5986705,61.4632208 28.6888621,61.3423257 C28.7790537,61.2214306 28.8123085,61.0673307 28.78,60.92 C28.1702857,60.5908963 27.6932822,60.0608925 27.43,59.42 C26.14,55.56 38.1,50.51 53.43,48.22 C67.51,46.11 79.6,47.07 81.7,50.28 C82.1341589,50.8294353 82.1819774,51.5905456 81.82,52.19 C80.9351362,53.7789279 79.6127723,55.0804672 78.01,55.94 C77.874409,56.0222986 77.7784378,56.1565362 77.7444301,56.3114603 C77.7104224,56.4663843 77.7413455,56.6284767 77.83,56.76 C77.9883165,57.0073392 78.3086422,57.0939138 78.57,56.96 C80.5313942,56.0005676 82.1662604,54.4839683 83.27,52.6 C83.8916522,51.185957 84.2313359,49.6641743 84.27,48.12 C85.27,48.43 87.91,49.49 88.92,49.9 L89,49.9 C88.95796,50.0672298 88.9311835,50.2379299 88.92,50.41 C88.8599083,51.9464466 90.009449,53.2627147 91.54,53.41 C92.2410364,53.4425 92.9259861,53.1934714 93.4424547,52.7183203 C93.9589232,52.2431692 94.2640689,51.5813101 94.29,50.88 C94.3897999,49.3386648 93.255935,47.9930274 91.72,47.83 L91.72,47.7 Z M72,41.2 C72.0145562,41.5844073 71.8668269,41.9572238 71.5929195,42.2273269 C71.3190122,42.4974299 70.9441662,42.6399308 70.56,42.62 C67.1952251,42.3601743 63.81338,42.4204448 60.46,42.8 C60.0709393,42.8315468 59.6868956,42.6956371 59.4042828,42.4263911 C59.1216699,42.1571451 58.9673264,41.7801318 58.98,41.39 L58.98,40.21 C58.9820958,39.912166 59.1893704,39.6551454 59.48,39.59 C63.4491189,38.9278529 67.4965135,38.8806333 71.48,39.45 C71.7756745,39.4998339 71.9891676,39.7602955 71.98,40.06 L72,41.2 Z M79.06,37.85 C78.9248348,38.0587277 78.6608076,38.1425458 78.43,38.05 C69.71,34.74 56.1,36.61 56.1,36.61 C51.4321272,37.0743374 46.8420941,38.1294402 42.44,39.75 C41.9596505,39.9338832 41.4192092,39.8658195 40.9994533,39.5685761 C40.5796974,39.2713327 40.3360459,38.7841536 40.35,38.27 C40.3852235,37.0729709 40.5055269,35.8799619 40.71,34.7 C41.1517552,31.4717524 42.4539345,28.4218206 44.48,25.87 C44.6,25.73 44.72,25.59 44.85,25.46 C44.8709744,25.4224863 44.8980054,25.3886975 44.93,25.36 L44.99,25.29 L45.14,25.13 L45.21,25.06 C51.14,18.86 61.57,18.15 68.89,22.19 C72.5503434,24.2505639 75.5843854,27.2638721 77.67,30.91 C77.99,31.51 80.01,36.18 79.06,37.85 Z" />
              <path d="M74.42,30.09 C72.7660508,27.2690724 70.243769,25.0590063 67.23,23.79 C63.8691058,22.3757686 60.209396,21.8190803 56.58,22.17 C55.291036,22.2712549 54.0223115,22.5505762 52.81,23 C52.5677596,23.0696934 52.4127694,23.3059023 52.4452646,23.5558656 C52.4777598,23.8058289 52.6879921,23.9945588 52.94,24 C55.6744096,23.7113626 58.4349724,23.7853363 61.15,24.22 C71.15,26.22 74.35,31.03 74.7,31.22 C74.8,31.27 74.92,31.17 74.87,31.07 C74.7408701,30.7292226 74.5940028,30.3954333 74.43,30.07" />
              <path d="M29.7,47.54 C29.8716387,47.7815286 30.1415507,47.9345039 30.4369473,47.9576723 C30.7323439,47.9808407 31.0228048,47.8718161 31.23,47.66 C31.5627061,47.3252135 31.8067267,46.9127843 31.94,46.46 C32.2465335,45.2975859 32.1729431,44.0675736 31.73,42.95 C31.444949,42.2368017 30.9268187,41.6411282 30.26,41.26 C30.1381623,41.1828579 29.990531,41.1576525 29.85,41.19 C29.4397927,41.3273438 29.0876199,41.5985168 28.85,41.96 C28.7903788,42.0346755 28.7660544,42.1315285 28.7833169,42.2255132 C28.8005793,42.3194979 28.8577337,42.4013855 28.94,42.45 C29.7525032,42.878884 30.3236848,43.6564281 30.49,44.56 C30.605348,45.4840315 30.3175434,46.4130211 29.7,47.11 C29.5937997,47.2336615 29.5937997,47.4163385 29.7,47.54" />
              <path d="M11,49 C10.1368537,48.9283329 9.28094556,49.2052366 8.62334092,49.7688977 C7.96573629,50.3325589 7.56118662,51.1360475 7.5,52 C7.47057884,53.8620442 8.92023306,55.413351 10.78,55.51 C12.5419633,55.6371195 14.0810109,54.3293738 14.24,52.57 C14.3139762,50.6956634 12.8727073,49.1075986 11,49" />
              <path d="M104.69,52.5 C104.69171,28.0580643 87.7518297,6.87963351 63.9065483,1.51206649 C40.0612668,-3.85550054 15.6805762,8.02167977 5.20904391,30.1068611 C-5.26248834,52.1920425 0.97248674,78.5854238 20.22,93.65 L21.22,94.44 C21.56,94.7 21.91,94.95 22.22,95.2 C27.5916318,99.0009122 33.6349224,101.749405 40.03,103.3 L40.18,103.3 L41.07,103.51 L41.34,103.56 L42.18,103.74 L42.51,103.8 L43.33,103.95 L43.65,104.01 C44.19,104.096667 44.73,104.176667 45.27,104.25 L45.59,104.3 L46.2,104.37 L46.82,104.44 L47.4,104.5 L48.07,104.56 L48.62,104.56 L49.34,104.56 L49.85,104.56 L50.68,104.56 L51.1,104.56 L52.35,104.56 C52.8,104.56 53.24,104.56 53.68,104.56 L54.12,104.56 L55.01,104.56 L55.54,104.56 L56.32,104.56 L56.89,104.51 L57.62,104.45 L58.22,104.38 L58.92,104.3 L59.53,104.22 L60.2,104.12 L60.82,104.02 L61.47,103.92 L62.1,103.8 L62.74,103.68 L63.37,103.54 L63.99,103.41 L64.62,103.26 L65.23,103.11 L66,103 L66.58,102.84 L67.23,102.66 L67.8,102.49 L68.44,102.28 C68.6299015,102.230573 68.816865,102.170478 69,102.1 L69.65,101.88 L70.19,101.69 L70.84,101.45 L71.36,101.25 L72,101 L72.5,100.8 L73.16,100.52 L73.65,100.31 L74.31,100.01 L74.78,99.79 L75.44,99.47 L75.89,99.24 L76.55,98.91 L76.99,98.67 C77.22,98.56 77.44,98.44 77.65,98.32 L78.08,98.08 L78.74,97.7 L79.14,97.46 L79.81,97.06 L80.19,96.82 L80.86,96.4 L81.22,96.16 L81.89,95.71 L82.23,95.48 L82.91,95 L83.22,94.77 L83.91,94.26 L84.19,94.05 L84.89,93.51 L85.14,93.3 L85.85,92.73 L86.06,92.54 L86.79,91.93 L86.96,91.78 L87.71,91.1 L87.82,91.01 L88.61,90.26 C98.917555,80.414135 104.739946,66.774345 104.72,52.52 M68.35,70 C68.28,69.42 68.21,68.83 68.12,68.25 C68.03,67.67 67.95,67.09 67.84,66.52 C67.73,65.95 67.64,65.37 67.53,64.8 C67.42,64.23 67.28,63.65 67.14,63.13 C67.0555907,62.7371048 67.2835043,62.3443816 67.6665151,62.2227498 C68.0495259,62.101118 68.4622628,62.2903914 68.62,62.66 C68.84,63.28 68.99,63.84 69.15,64.44 C69.31,65.04 69.45,65.61 69.58,66.2 C69.83,67.39 70.03,68.57 70.22,69.76 C70.46,71.32 70.62,72.89 70.75,74.45 C71.75,74.5 72.82,74.57 73.85,74.67 C76.6431242,74.9565683 79.3983126,75.5364316 82.07,76.4 C82.4099539,76.5249979 82.6013177,76.8858561 82.5140737,77.2373979 C82.4268298,77.5889397 82.0889505,77.8184528 81.73,77.77 L81.68,77.77 C80.34,77.54 79.04,77.22 77.68,77.07 L76.68,76.92 L76.18,76.85 L75.68,76.85 L73.68,76.66 C73.34,76.61 73,76.66 72.68,76.59 L71.68,76.53 L70.94,76.53 C70.94,76.7 70.94,76.87 70.94,77.04 L71.02,78.83 L71.02,80.63 C71.02,81.83 71.02,83.03 71.02,84.23 C71.02,85.43 70.93,86.62 70.89,87.81 C70.85,89 70.72,90.2 70.61,91.39 C70.5506717,91.7850189 70.202504,92.0713774 69.8034613,92.0533561 C69.4044187,92.0353348 69.0834803,91.7187587 69.06,91.32 C69.06,90.14 69.06,88.96 69.12,87.78 C69.18,86.6 69.12,85.41 69.12,84.23 C69.12,83.05 69.12,81.87 69.06,80.7 L69,78.93 L69,77 C69,76.77 69,76.55 69,76.33 L67.66,76.33 L65.66,76.33 C64.98,76.33 64.3,76.39 63.66,76.41 C63.02,76.43 62.3,76.48 61.66,76.54 C60.3,76.63 58.94,76.76 57.59,76.91 C54.88,77.22 52.16,77.61 49.51,78.13 C49.1241093,78.2037774 48.7503173,77.9545827 48.67,77.57 C48.6043365,77.2062818 48.8247325,76.8519197 49.18,76.75 C50.55,76.38 51.89,76.09 53.26,75.82 C54.63,75.55 55.99,75.33 57.37,75.12 C58.05,75.01 58.75,74.94 59.44,74.85 C60.13,74.76 60.82,74.69 61.51,74.63 C62.2,74.57 62.89,74.5 63.59,74.47 C64.29,74.44 64.98,74.37 65.68,74.36 C66.78,74.31 67.88,74.3 68.99,74.36 C68.87,72.89 68.73,71.43 68.55,69.98 M41.85,62.89 C41.35,64.55 40.18,68.55 39.45,71.68 C37.5762888,80.8038311 36.2108519,90.0247027 35.36,99.3 C30.8512917,97.6394497 26.6097258,95.3283185 22.77,92.44 C23.5718979,86.4192319 24.8594286,80.4731813 26.62,74.66 C27.2605111,72.5502944 28.1395234,70.520514 29.24,68.61 C30.1214061,67.3256396 31.3391751,66.3085257 32.76,65.67 L33.02,65.55 L33.45,65.31 L34,65.03 C34.38,64.85 34.75,64.67 35.12,64.51 L35.69,64.26 L36.25,64.03 L37.39,63.59 C38.39,63.22 40.09,62.7 41.15,62.39 C41.7,62.23 41.99,62.39 41.85,62.89 M86.39,76.89 C84.83,71.08 82.72,61.98 76.49,59.89 C69.85,57.63 62.71,57.38 55.81,57.82 C50.8979449,58.1354732 46.0371845,59.0043048 41.32,60.41 C39.23,61.02 32.53,63.59 31.2,64.27 C29.6791325,64.9558267 28.3752589,66.0452702 27.43,67.42 C26.2501452,69.4662065 25.3073926,71.6402412 24.62,73.9 C22.9394847,79.4693413 21.6529738,85.150039 20.77,90.9 C19.6,89.9 18.46,88.9 17.37,87.79 C-2.04066785,68.3859879 -2.12828923,36.9459407 17.1739225,17.4340384 C36.4761342,-2.07786401 67.9152929,-2.32994335 87.5278959,16.8699398 C107.140499,36.069823 107.557029,67.507233 88.46,87.22 C87.9947786,83.7387084 87.3033152,80.2914123 86.39,76.9" />
            </svg>
          </a>
        </p>
        <p>
          <a href="#help" onclick="document.getElementById('help').scrollIntoView({behavior: 'smooth'}); return false;">↓ {{ $t('welcome.help') }} ↓</a>
        </p>
      </div>
    </div>
    <AppHelp />
  </div>
</template>
